<template>
  <div class="searchFormClass">
    <el-form ref="searchFormRef" :inline="true" :model="model" v-bind="$attrs">
      <div>
        <template v-for="item in props.list" :key="item.prop">
          <el-form-item v-bind="item">
            <template v-if="item.searchType === 'input'">
              <el-input
                v-model="model[item.prop]"
                :placeholder="`请输入${item.label}`"
                clearable
                v-bind="item.otherProps"
              />
            </template>
            <template v-else-if="item.searchType === 'select'">
              <el-select
                v-model="model[item.prop]"
                :placeholder="`请选择${item.label}`"
                clearable
                v-bind="item.otherProps"
              >
                <el-option
                  v-for="(option, index) in item.extra ? props.dict[item.extra] : item.options"
                  :key="index"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </template>
            <template v-else-if="item.searchType === 'select2'">
              <el-select-v2
                v-model="model[item.prop]"
                :placeholder="`请选择${item.label}`"
                :clearable="true"
                :props="{ label: 'label', value: 'value' }"
                :options="item.extra ? [...props.dict[item.extra]] : [...item.options as any[]]"
                v-bind="item.otherProps"
              />
            </template>
            <template v-else-if="item.searchType === 'datepicker'">
              <el-date-picker
                v-model="model[item.prop]"
                :aria-label="item.label"
                :placeholder="`请选择${item.label}`"
                clearable
                v-bind="item.otherProps"
              />
            </template>
            <template v-else-if="item.searchType === 'timepicker'">
              <el-time-picker
                v-model="model[item.prop]"
                :aria-label="item.label"
                :placeholder="`请选择${item.label}`"
                clearable
                v-bind="item.otherProps"
              />
            </template>

            <template v-else>
              <slot></slot>
            </template>
          </el-form-item>
        </template>

        <el-form-item>
          <el-button :type="'primary'" @click="onSubmit">搜索</el-button>
          <el-button :type="'default'" @click="onReset(searchFormRef)">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { PropType, computed, ref } from 'vue';
import { IListPropsType, dictPropsType } from './config';
import type { FormInstance } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  list: {
    type: Array as PropType<IListPropsType>,
    required: true,
  },
  dict: {
    type: Object as PropType<dictPropsType>,
    required: false,
    default: () => {},
  },
});

const emit = defineEmits(['update:modelValue', 'query', 'reset']);

const searchFormRef = ref<FormInstance>();

const model = computed({
  get() {
    return new Proxy(props.modelValue, {
      set(target, key, value) {
        // console.log(1111, { target, key, value });
        emit('update:modelValue', { ...target, [key]: value });
        return true;
      },
    });
  },
  set(val) {
    emit('update:modelValue', val);
  },
});

const onSubmit = () => {
  emit('query');
};

// 重置
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  emit('reset');
};
</script>

<style lang="scss" scoped>
.searchFormClass {
  .el-form {
    .el-input,
    .el-select,
    .el-date-picker,
    .el-select-v2 {
      width: 220px;
    }
  }
}
</style>
